<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>学习时长</p>
        </div>
        <img src="../icon_kai09n62lta/drxx18.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>游戏时长</p>
        </div>
        <img src="../icon_kai09n62lta/youxiji.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>旅游时长</p>
        </div>
        <img src="../icon_kai09n62lta/tubiaozhizuomoban_shatan.svg" alt="" class="imgs">
      </div>
      <div class="dashboard-hearder">
        <div>
          <p class="hour">12小时</p>
          <p>社交时长</p>
        </div>
        <img src="../icon_kai09n62lta/社交APP.svg" alt="" class="imgs">
      </div>
    </div>
    <div class="dashboard-middle">
      <div class="hello">
        <div class="chart" ref="chart"></div>
      </div>
      <div class="pack">
        <div class="pillar" ref="pillar"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data () {
    return {
      chart: null,
      pillar: null
    }
  },
  mounted () {
    this.init()
    this.inited()
  },
  methods: {
    init () {
      console.log(this.$Echarts)
      //2.初始化
      this.chart = this.$Echarts.init(this.$refs.chart)
      //3.配置数据
      let option = {
        //表头
        title: {
          text: '任务时长',
          left: '2%'
        },
        //样式
        grid: {
          bottom: 30,
        },
        xAxis: {
          type: 'category',
          data: ['学习时长', '游戏时长', '旅游时长', '社交时长'],
        }, //X轴
        yAxis: { type: 'value' }, //Y轴
        series: [{
          itemStyle: {
            height: 100,
          },
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
        }], //配置项
      }
      // 4.传入数据
      this.chart.setOption(option)
    },
    inited () {
      console.log(this.$Echarts)
      //2.初始化
      this.pillar = this.$Echarts.init(this.$refs.pillar)
      //3.配置数据
      let option = {
        title: {
          text: '数据处理中心',
          left: '5%'
        },
        legend: {
          left: 'center',
          bottom: '5%',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true }
          }
        },
        series: [{
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: '学习时长' },
            { value: 38, name: '游戏时长' },
            { value: 32, name: '旅游时长' },
            { value: 30, name: '社交时长' },
          ]
        }], //配置项
      }
      // 4.传入数据
      this.pillar.setOption(option)
    },
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 10px;
    height: 100%;
  }
  &-middle {
    height: 100%;
    display: flex;
  }
  &-text {
    font-size: 16px;
    display: flex;
  }
  &-hearder {
    width: 400px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 10px;
    background-color: #fff;
  }
}
.hello {
  // height: 100%;
  width: 60%;
  margin-top: 10px;
  margin-right: 10px;
  padding-top: 10px;
  background-color: #fff;
}
.chart {
  width: 600px;
  height: 370px;
}
.pack {
  height: 100%;
  width: 38%;
  margin-top: 10px;
  padding-top: 10px;
  background-color: #fff;
}
.pillar {
  width: 370px;
  height: 370px;
}
.imgs {
  width: 50px;
  height: 50px;
}
.hour {
  color: #409eff;
}
</style>
